<template>
    <!-- 商品组 -->
    <view class="diy-goods" :style="{ background: itemStyle.background }">
      <view class="goods-list" :class="[`display__${itemStyle.display}`]">
        <scroll-view :scroll-x="itemStyle.display === 'slide'">
			<view class="goods-content">
				<view :class="['goods-item', `column-${itemStyle.column}`]" v-for="(dataItem, index) in dataList" :key="index" @click="onTargetGoods(dataItem.goods_id)">
					<!-- 单列商品 -->
					<block v-if="itemStyle.column === 1">
						<singleGoods :data="dataItem" />
					</block>
					<!-- 多列商品 -->
					<block v-else>
						<multipleGoods :data="dataItem" />
					</block>
				</view>
			</view>

        </scroll-view>
      </view>
    </view>
  </template>
  
  <script>
	import singleGoods from './singleGoods.vue';
    import multipleGoods from './multipleGoods.vue';

    export default {
      name: "Product",
      components: {
		singleGoods,
        multipleGoods
      },
      /**
       * 组件的属性列表
       * 用于组件自定义设置
       */
      props: {
        itemIndex: String,
        itemStyle: Object,
        params: Object,
        dataList: Array
      },
  
      /**
       * 组件的方法列表
       * 更新属性和数据的方法与更新页面数据的方法类似
       */
      methods: {
  
        /**
         * 跳转商品详情页
         */
        onTargetGoods(goodsId) {
          this.$navTo(`pages/goods/detail`, { goodsId })
        }
  
      }
  
    }
  </script>
  
  <style lang="scss" scoped>
    .diy-goods {
		.goods-list {
			padding: 4rpx;
			box-sizing: border-box;
		}
		.goods-content {
			display: flex;
			flex-wrap: wrap;
		}
		.goods-item {
			box-sizing: border-box;
			padding: 6rpx;
			&.column-1 {
				width: 100%;
			}
			&.column-2 {
				width: 50%;
			}
			&.column-3{
				width: 33.33333%;
			}
		}
    }
  </style>
  